<!--
* description: 交付地管理---交付地变更申请
* author:xlc
* createdDate: 2020-12-1
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    :title="titleName"
    center
    width="60%"
    top="2rem"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader slot="title" :title="titleName" :style-type="$store.state.app.dialogType" />
    <div
      v-loading="editLoading"
      class="app-container app-container-table"
    >
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-components="tableComponents"
        :dynamic-form-fields="formField"
      />
    </div>
  </el-dialog>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import { orgApis } from '@/api/vesalesapi.js'
import dialogHeader from '@/components/dialogHeader'
import OneTableTemplate from '@/components/templates/oneTable'
import Vue from 'vue'
export default {
  name: 'DeliveryPlaceChange',
  components: {
    OneTableTemplate,
    dialogHeader
  },
  mixins: [oneTableWithViewTemplateMixins],
  // 阻塞路由预加载网格中组件的数据
  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData([to.path, 'supplierMessage-edit'], () => {
      next()
    })
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false
    },
    dataForForm: {
      type: Object,
      default: () => {}
    },
    popupsState: {
      type: String,
      default: 'add'
    }
  },
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])
    return {
      editLoading: false,
      titleName: '新增交付地变更申请',
      // 网格查询API配置对象
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          clickEvent: () => this.save(),
          text: '保存', // 查询
          name: 'save', // 按钮图标样式
          position: 'right',
          fuzzySearch: true
        },
        {
          compKey: 'btnKey4',
          type: '',
          size: 'small',
          clickEvent: () => this.reset(),
          text: this.$t('sys.button.reset'),
          name: 'reset',
          position: 'right' // 重置
        }
      ],
      // 动态组件-查询条件
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            // 显示组件
            {
              compKey: 'compKey1',
              labelName: '关联订单号：',
              isRequire: true,
              codeField: 'associatedOrder',
              component: () => import('./focusinput/index.vue'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey2',
              labelName: '原交付门店：',
              codeField: 'jfdOldName',
              isRequire: true,
              disabled: true,
              isMul: false,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey3',
              labelName: '原交付仓库：',
              codeField: 'jfdOldHouseName',
              isRequire: true,
              disabled: true,
              isMul: false,
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey4',
              labelName: '变更原因：',
              isRequire: true,
              codeField: 'jfdReason',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMust: true,
              span: 8
            },
            {
              compKey: 'compKey5',
              labelName: '新交付门店：',
              codeField: 'jfdNewName',
              isRequire: true,
              textField: 'jfdNewId',
              component: () => import('./multipleSearchInput'),
              type: 'inputText',
              isMust: true,
              dataToObject: {
                // 控制弹窗页面 搜索 网格 元素
                tableComponents: [
                  {
                    compKey: 'compKey1',
                    labelName: '门店编码：',
                    codeField: 'deliveryDlrCode',
                    component: () => import('@/components/org/commonInput'),
                    type: 'inputText',
                    isMust: true,
                    span: 8
                  },
                  {
                    compKey: 'compKey2',
                    labelName: '门店名称：',
                    codeField: 'deliveryDlrShortName',
                    component: () => import('@/components/org/commonInput'),
                    type: 'inputText',
                    isMust: true,
                    span: 8
                  }
                ],
                tableCols: [
                  {
                    prop: 'deliveryDlrId',
                    label: '门店id',
                    hidden: true
                  },
                  {
                    prop: 'deliveryDlrCode',
                    label: '门店编码'
                  },
                  {
                    prop: 'deliveryDlrShortName',
                    label: '门店名称'
                  }
                ],
                formField: {
                  deliveryDlrCode: '',
                  deliveryDlrShortName: ''
                },
                returnField: {
                  prop: ['deliveryDlrShortName', 'deliveryDlrId'],
                  label: '门店名称'
                },
                api: orgApis.ListOfDeliveryStore
              },
              span: 8
            },
            {
              compKey: 'compKey6',
              labelName: '新交付仓库：',
              codeField: 'jsdNewHouseName',
              isRequire: true,
              textField: 'jfdNewHouseId',
              component: () => import('./multipleSearchInput'),
              type: 'inputText',
              disabled: true,
              parentFileds: 'disabled:jfdNewName-jsdNewHouseName--false',
              isMust: true,
              dataToObject: {
                // 控制弹窗页面 搜索 网格 元素
                tableComponents: [
                  {
                    compKey: 'compKey1',
                    labelName: '仓库编码：',
                    codeField: 'stockCode',
                    component: () => import('@/components/org/commonInput'),
                    type: 'inputText',
                    isMust: true,
                    span: 8
                  },
                  {
                    compKey: 'compKey2',
                    labelName: '仓库名称：',
                    codeField: 'stockName',
                    component: () => import('@/components/org/commonInput'),
                    type: 'inputText',
                    isMust: true,
                    span: 8
                  }
                ],
                tableCols: [
                  {
                    prop: 'stockId',
                    label: '仓库id',
                    hidden: true
                  },
                  {
                    prop: 'stockCode',
                    label: '仓库编码'
                  },
                  {
                    prop: 'stockName',
                    label: '仓库名称'
                  }
                ],
                formField: {
                  stockCode: '',
                  stockName: ''
                },
                listQuery: 'dlrId',
                returnField: {
                  prop: ['stockName', 'stockId'],
                  label: '仓库名称'
                },
                api: orgApis.ListOfCityWarehouse
              },
              span: 8
            }
          ],
      formField: {
        carConfigId: '',
        jfdNewId: '',
        associatedOrder: '',
        jfdOldName: '',
        jfdOldId: '',
        jfdOldHouseId: '',
        jfdOldHouseName: '',
        jfdReason: '',
        jfdNewName: '',
        jsdNewHouseName: '',
        jfdNewHouseId: ''
      },
      // 单表格模版页面组件回调事件
      callbackObj: {
      }
    }
  },
  // watch: {
  //   'formField.jfdNewId': {
  //     handler: function(val) {
  //       if (val) {
  //         console.log(val)
  //       }
  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // },
  mounted() {
    if (this.popupsState === 'edit') {
      var obj = {
        associatedOrder: this.dataForForm.associatedOrder,
        jfdOldId: this.dataForForm.jfdOldId,
        jfdOldHouseId: this.dataForForm.jfdOldHouseId,
        jfdNewId: this.dataForForm.jfdNewId,
        jfdNewHouseId: this.dataForForm.jfdNewHouseId,
        jfdOldName: this.dataForForm.oldDlrShortName,
        jfdOldHouseName: this.dataForForm.oldCarHouseName,
        jfdNewName: this.dataForForm.newDlrShortName,
        jsdNewHouseName: this.dataForForm.newCarHouseName,
        updateControlId: this.dataForForm.updateControlId,
        jfdId: this.dataForForm.jfdId,
        jfdReason: this.dataForForm.jfdReason
      }
      Object.assign(this.formField, obj)
      this.titleName = '编辑交付地变更申请'
    }
    this.$watch('formField.jfdNewId', function(newVal, oldVal) {
      this.formField.jsdNewHouseName = ''
      this.formField.jfdNewHouseId = ''
    }, { deep: true })
  },
  methods: {
    // 关闭弹窗
    closeEdit(type) {
      this.$emit('close', type)
    },

    save() {
      this.$utils.validataMoth(this, 'validpage')
      if (this.valid) {
        this.editLoading = true
        var val = this.formField
        const that = this
        var api
        if (val.updateControlId) {
          api = orgApis.deliveryPlaceChangeEdit
        } else {
          api = orgApis.deliveryPlaceChangeAdd
        }
        const queryObj = {
        // api配置
          apiConfig: api,
          // 条件/实体参数（变量），根据typeParam中的定义配置
          variables: val
        }
        // 转换了中台请求格式数据
        var paramD = that.$getParams(queryObj)
        // 调用中台API方法（可复用）
        that.$requestAPI(paramD).then(response => {
          this.editLoading = false
          this.$message({
            message: response.msg,
            duration: 2000
          })
          if (response.result === '1') {
            this.closeEdit('1')
          }
        })
      }
    }
  }
}
</script>
